<template>
  <!-- 积分评价 -->
  <div class="integral-evaluate-content">
    <div v-show="dayId && rankInfo.LOGIN_NAME" class="head">
      <span>{{ rankInfo.LOGIN_NAME || '' }}（{{ rankInfo.CALC_TYPE_NAME }}<span v-show="rankInfo.CALC_TYPE_NAME == '智慧家庭工程师'"> - {{ skillType }}</span>）
      </span>
      <span>{{ dayId }}</span>
    </div>
    <div class="integral-content">
      <van-loading v-if="isLoadTotal" size="16px">加载中...</van-loading>
      <div v-else class="integral-total">
        <div class="img">
          <img v-if="rankInfo.CALC_TYPE_NAME == '小CEO'" src="~@/assets/imgs/publicline/index/icon_ceo.png" />
          <img v-else-if="rankInfo.CALC_TYPE_NAME == '智慧家庭工程师'" src="~@/assets/imgs/publicline/index/icon_wise.png" />
          <img v-else src="~@/assets/imgs/publicline/index/icon_manager.png" />
        </div>
        <div class="info">
          <div class="total">
            <span class="name">年度总积分</span>
            <span class="size">{{ totalInfo.SCO_M || 0 }}</span>
          </div>
          <div class="evaluate">
            <div class="sub-name pd5">您的星级段位：</div>
            <div class="sub-name sub-size">{{ totalInfo.GRADE || '' }}</div>
            <van-rate v-model="totalInfo.RATE" :count="totalInfo.RATE" color="#e24435" :size="12" />
          </div>
        </div>
      </div>
    </div>
    <div class="integral-content">
      <van-loading v-if="isLoadRank" size="16px">加载中...</van-loading>
      <div v-else class="integral-evaluate">
        <div class="evaluate-item" :class="{ 'active': isActive == 'provice' }" @click="handleActive('provice')">
          <div class="fiswei2 count">{{ rankInfo.PROVINCENUMBER || 0 }}</div>
          <div class="fiswei name">您在全省</div>
          <div class="fiswei name">{{ rankInfo.CALC_TYPE_NAME || '' }}排名</div>
        </div>
        <div class="evaluate-item" :class="{ 'active': isActive == 'area' }" @click="handleActive('area')">
          <div class="fiswei2 count">{{ rankInfo.AREANUMBER || 0 }}</div>
          <div class="fiswei name">您在本市</div>
          <div class="fiswei name">{{ rankInfo.CALC_TYPE_NAME || '' }}排名</div>
        </div>
      </div>
    </div>
    <div class="integral-content">
      <div class="integral-sign">
        人员评价效能预警规则开发中...
      </div>
    </div>
    <div class="integral-content">
      <van-loading v-if="isLoadList" size="16px">加载中...</van-loading>
      <div v-else class="integral-list">
        <van-divider>本组共计{{ total }}人参与排名</van-divider>
        <div v-show="isActive == 'provice'">
          <div class="list-item">
            <span class="rank"></span>
            <span class="name">本组积分标兵</span>
            <span class="city">地市</span>
            <span class="city-eval wid texR">积分</span>
          </div>
          <div class="list-item" v-for="item in list" :key="item.name">
            <span v-if="item.AREANUMBER == 1" class="rank">
              <img src="~@/assets/imgs/publicline/index/icon_rank_one.png" />
            </span>
            <span v-else-if="item.AREANUMBER == 2" class="rank">
              <img src="~@/assets/imgs/publicline/index/icon_rank_two.png" />
            </span>
            <span  v-else-if="item.AREANUMBER == 3" class="rank">
              <img src="~@/assets/imgs/publicline/index/icon_rank_three.png" />
            </span>
            <span v-else class="rank">{{ item.AREANUMBER }}</span>
            <span class="name">{{ item.LOGIN_NAME }}</span>
            <span class="city">{{ item.AREA_NAME }}</span>
            <span class="city-eval size wid texR">{{ item.SCO_M }}分</span>
          </div>
        </div>
        <div v-show="isActive == 'area'">
          <div class="list-item">
            <span class="rank"></span>
            <span class="area-name">本组积分标兵</span>
            <span class="name wid texR">积分</span>
          </div>
          <div class="list-item" v-for="item in list" :key="item.name">
            <span v-if="item.AREANUMBER == 1" class="rank">
              <img src="~@/assets/imgs/publicline/index/icon_rank_one.png" />
            </span>
            <span v-else-if="item.AREANUMBER == 2" class="rank">
              <img src="~@/assets/imgs/publicline/index/icon_rank_two.png" />
            </span>
            <span  v-else-if="item.AREANUMBER == 3" class="rank">
              <img src="~@/assets/imgs/publicline/index/icon_rank_three.png" />
            </span>
            <span v-else class="rank">{{ item.AREANUMBER }}</span>
            <span class="area-name">{{ item.LOGIN_NAME }}</span>
            <span class="name size wid texR">{{ item.SCO_M }}分</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { evaluateDate, evaluateTotal, evaluateRank, evaluateRankProvice, evaluateRankArea, evaluateGrade } from '@/api/publicline/wise.js'

export default {
  components: {  },
  data() {
    return {
      loginId: '',
      dayId: '',
      isLoadTotal: true,
      totalInfo: {},
      isLoadRank: true,
      rankInfo: {},
      skillType:'',
      isActive: 'provice',
      list: [],
      page: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      isLoadList: true,
      url: {
        'provice': evaluateRankProvice,
        'area': evaluateRankArea
      }
    }
  },
  mounted() {
    this.loginId = Vue.ls.get(USER_INFO).username
    this.getAccountDate()
  },
  methods: {
    // 获取日账期
    async getAccountDate() {
      const res = await evaluateDate({})
      const { result, success } = res
      if (success) {
        this.dayId = result[0].DAY_ID
        this.getTotal()
        this.getRank()
        this.getList()
      }
    },
    // 获取总积分
    async getTotal() {
      const res = await evaluateTotal({ dayId: this.dayId, loginId: this.loginId })
      const { result, success } = res
      if (success) {
        this.totalInfo = result[0] || {}
        this.isLoadRank = false
      }
    },
    // 获取排名
    async getRank() {
      const res = await evaluateRank({ dayId: this.dayId, loginId: this.loginId })
      const { result, success } = res
      if (success) {
        this.rankInfo = result[0] || {}
        if(this.rankInfo.CALC_TYPE_NAME == '智慧家庭工程师') {
          this.getGrade()
        }
        this.isLoadTotal = false
      }
    },
    // 获取等级
    async getGrade() {
      const res = await evaluateGrade({ loginId: this.loginId })
      const { result, success } = res
      if (success) {
        this.skillType = result[0].SKILL_TYPE
      }
    },
    handleActive(value) {
      this.isActive = value
      this.getList()
    },
    // 获取列表
    async getList() {
      this.isLoadList = true
      const res = await this.url[this.isActive]({ dayId: this.dayId, loginId: this.loginId, ...this.page })
      const { result, success } = res
      if (success) {
        this.list = result.list
        this.total = result.total
        this.isLoadList = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.integral-evaluate-content {
  background: #e24435;
  padding: 12px;
  .head {
    color: #fff;
    margin: 6px 0;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
  }
  .integral-content {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .van-loading {
    text-align: center;
    padding: 20px 0;
  }
  .integral-total {
    display: flex;
    align-items: flex-end;
    padding: 12px;
    .img {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .info {
      flex: 1;
      .pd5 {
        padding-right: 50px;
      }
      .name {
        font-size: 18px;
        font-weight: 700;
      }
      .size {
        font-size: 30px;
        color: #e24435;
        padding-left: 4px;
      }
      .evaluate {
        text-align: right;
        padding-right: 12px;
        margin-top: 12px;
      }
      .sub-name {
        font-size: 16px;
        font-weight: 700;
      }
      .sub-size {
        color: #e24435;
      }
    }
  }
  .integral-evaluate {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    .evaluate-item {
      width: 49%;
      padding: 8px 0;
      .fiswei {
        font-size: 18px;
        font-weight: 500;
      }
      .fiswei2 {
        font-size: 22px;
        font-weight: 500;
      }
      .count {
        color: #e24435;
      }
      .name {
        color: #000;
      }
      &.active {
        background: #e24435;
        border-radius: 4px;
        .count, .name {
          color: #fff;
        }
      }
    }
  }
  .integral-sign {
    padding: 12px;
    font-weight: 500;
  }
  .integral-list {
    padding: 12px;
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 44px;
      border-bottom: 1px solid #F5F5F5;
      .rank {
        width: 14%;
        text-align: center;
        img {
          width: 32px;
        }
      }
      .name, .city, .city-eval, .area-name {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
      }
      .name {
        width: 32%;
      }
      .city {
        width: 20%;
      }
      .city-eval {
        width: 34%;
      }
      .area-name {
        width: 50%;
      }
      .size {
        color: #e24435;
      }
      .wid {
        flex: 1;
      }
      .texR {
        text-align: right;
      }
      .pdL {
        padding-left: 12px;
      }
    }
  }
}
</style>
